<template>
	<!-- 会员码 -->
	<view class="container" style="padding: 20rpx 30rpx;">
		<view class="w-100 d-flex flex-column">
			<!-- 头像 -->
			<view class="d-flex just-content-center align-items-center">
				<view class="avatar-wrapper">
					<image :src="member.avatar"></image>
					<view class="tag">
						<image src="/static/images/mine/level.png" mode="widthFix"></image>
						<view>{{ member.memberLevel }}</view>
					</view>
				</view>
			</view>
			<view class="user-box">
				<!-- 昵称 -->
				<view class="d-flex just-content-center text-color-assist font-size-base font-weight-bold mb-30">
					{{ member.nickname }}
				</view>
				<view class="w-100 d-flex font-size-sm text-color-assist mb-30">
					<view class="user-grid" @tap="coupons">
						<view class="value">{{ member.couponNum }}</view>
						<view>云鲤券</view>
					</view>
					<view class="user-grid" @tap="integrals">
						<view class="value">{{ member.pointNum }}</view>
						<view>积分</view>
					</view>
					<view class="user-grid" @tap="balance">
						<view class="value">{{ member.balance }}</view>
						<view>余额</view>
					</view>
					<view class="user-grid">
						<view class="value">{{ member.giftBalance }}</view>
						<view>礼品卡</view>
					</view>
				</view>
				<!-- qrcode begin -->
				<view class="d-flex just-content-center align-items-center"><canvas canvas-id="memberCode"
						style="width: 350rpx; height: 350rpx;"></canvas></view>
				<!-- qrcode end -->
				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 50rpx;">
					<view class="font-size-sm text-color-assist">支付前出示可累计积分，会员码每30秒更新</view>
				</view>
			</view>
		</view>
		<image src="https://s3.uuu.ovh/imgs/2024/12/14/dc4fa515052c9185.png" class="w-100" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import uQRCode from '@/common/uqrcode'
	export default {
		data() {
			return {};
		},
		onShow() {
			let i = 1
			this.makeMemberCode(i)
			setInterval(() => {
				i++
				this.makeMemberCode(i)
			}, 30000) //30秒换一次二维码
		},
		computed: {
			...mapState(['member'])
		},
		methods: {
			makeMemberCode(i) {
				uQRCode.make({
					canvasId: 'memberCode', //绑定二维码id
					componentInstance: this, //组件实例
					text: `memberCode${i}`, //二维码扫描的信息，这里做测试循环输出
					size: uni.upx2px(350), //二维码大小
					margin: 20,
					backgroundColor: '#ffffff', //二维码背景色
					foregroundColor: '#000000', //二维码前景色
					fileType: 'jpg', //输出二维码格式
					correctLevel: uQRCode.defaults.correctLevel, //二维码的容错级别
					success: res => {
						// console.log(res)//成功回调函数
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.avatar-wrapper {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100%;
		}

		.tag {
			background-color: #ffffff;
			position: absolute;
			right: -30rpx;
			bottom: -6rpx;
			display: flex;
			align-items: center;
			color: $color-warning;
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 50rem !important;
			box-shadow: 2rpx 2rpx 20rpx rgba($color: #000000, $alpha: 0.1);

			image {
				width: 26rpx;
			}
		}
	}

	.user-box {
		width: 100%;
		position: relative;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin-top: -75rpx;
		padding-top: 105rpx;
		padding-bottom: 75rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	}

	.user-grid {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		&::after {
			content: ' ';
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			border-right: 1rpx solid $text-color-assist;
			transform: scaleX(0.2) scaleY(0.5);
		}

		&:nth-last-child(1)::after {
			border-right: 0;
		}

		.value {
			font-size: $font-size-base;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
	}
</style>